<template>
	<el-drawer title="人脸所在资源" size="480px" :visible.sync="visible" direction="rtl" append-to-body custom-class="face_drawer">
		<div class="face_detail_wrapper">
			<div class="header">
				<el-image :src="data.src" :preview-src-list="[data.src]" fit="contain"></el-image>
				<h1>{{ data.name }}</h1>
			</div>
			<div class="bodybox">
				<div class="item" v-for="(item, index) in resourceList" :key="index">
					<el-image :src="item.cover_url" :preview-src-list="[item.cover_url]" fit="cover"></el-image>
					<div class="text">
						<el-link @click="handleLookResource(item.id)">{{ item.file_name }}</el-link>
						<p>
							<span>{{ item.create_name }}</span>
							<span>{{ item.create_time }}</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import moment from 'moment';
import { queryFileDetail } from '@/api/data/tbNetDisk';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			disabled: false,
			visible: this.value,
			sourceList: [
				{
					cover_url: 'None',
					create_name: '煜墨',
					create_time: '2024-10-14T13:59:37.274000+08:00',
					file_name: '郭富城测试3',
					id: '7b66921fd94f4cb284b5c69e2645ec4e',
					url: '/busi/2024/8/27/1724729344769_2483.jpg'
				},
				{
					cover_url: 'None',
					create_name: '煜墨',
					create_time: '2024-10-16T11:12:29.314000+08:00',
					file_name: '郭富城测试1',
					id: '353f41c24d6f4065aa6413bf0e3d5270',
					url: '/busi/2024/10/8/1728374683858_8737.jpg'
				}
			]
		};
	},
	computed: {
		resourceList() {
			return this.sourceList.map((item) => {
				let obj = { ...item };
				obj['create_time'] = moment(item.create_time).format('YYYY-MM-DD HH:mm:ss');
				return obj;
			});
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		async handleLookResource(id) {
			if (!this.disabled) {
				this.disabled = true;
				let result = await queryFileDetail(id).then((res) => res.data);
				this.disabled = false;
				if (result.code === '0') {
					let datas = this.$detailData(result.data);
					let isHasData = Object.keys(datas).length > 0;
					if (isHasData) {
						let routeData = this.$router.resolve({ path: `/data/resource/${id}` });
						window.open(routeData.href, '_blank');
					}
				}
			}
		}
	}
};
</script>

<style lang="scss">
.face_drawer.rtl {
	top: 56px;
}
</style>
<style lang="scss" scoped>
.face_detail_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.header {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		padding: 16px;
		border-bottom: solid 1px #e4e7ed;
		.el-image {
			width: 120px;
			height: 120px;
			background-color: #ebeef5;
		}
		h1 {
			margin-left: 10px;
			font-weight: normal;
			line-height: 1.75;
		}
	}
	.bodybox {
		flex: 1;
		padding: 8px;
		overflow: hidden;
		overflow-y: auto;
		.item {
			display: flex;
			align-items: center;
			padding: 8px;
		}
		.el-image {
			width: 56px;
			height: 56px;
		}
		.text {
			margin-left: 16px;
			.el-link {
				font-size: 16px;
				overflow: hidden;
				white-space: nowrap;
				text-decoration: none;
				text-overflow: ellipsis;
			}
			p {
				color: #909399;
				margin-top: 8px;
				line-height: 24px;
			}
			span:first-child {
				margin-right: 32px;
			}
		}
	}
}
</style>
